<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

 
  <div style="display: inline-flex;width: 100%;height: 20%;margin-top: 1vh;text-align: center;">
    
    <div class="box">
 
      <div style="width: 100%;height: 30%;margin-top: 2vh;">
                
        <el-form ref="form" label-position="right" :model="form" label-width="120px">
          <el-form-item label="光伏单体容量：">
            <el-input style="width: 90%;" v-model="form.name">
              <template slot="append">kw</template>
            </el-input>
          </el-form-item>
          <el-form-item label="光伏板数量：">
            <el-input style="width: 90%;"  v-model="form.name">
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
         
        </el-form>

      </div>

    </div>
        
    <div class="box">
       
      <div style="width: 100%;height: 30%;margin-top: 2vh;">
                
        <el-form ref="form" label-position="right" :model="form" label-width="120px">
          <el-form-item label="⻛机单体容量：">
            <el-input style="width: 90%;" v-model="form.name">
              <template slot="append">kw</template>
            </el-input>
          </el-form-item>
          <el-form-item label="⻛机数量：">
            <el-input style="width: 90%;"  v-model="form.name">
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
          
        </el-form>

      </div>

    </div>
         
 

  </div>

  <div style="width: 100%;height: 60%;text-align: center;position: absolute;">
    
    <el-main style="overflow: hidden;">
      <baidu-map id="allmap" @ready="mapReady">
        <!--城市列表控件-->
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      </baidu-map>

    </el-main>
   
    <el-form ref="form" style="text-align: left;float: left;" :inline="true" class="demo-form-inline" label-position="right" :model="form" label-width="120px">
      <el-form-item label="制氢地址：">
        <el-input style="width:30%;" v-model="form.name">
          <template slot="append">省</template>
        </el-input>
        <el-input style="width:30%;" v-model="form.name">
          <template slot="append">市</template>
        </el-input>
      </el-form-item>
   
      <el-form-item label="经纬度：">
        <el-input style="width: 80%;"  v-model="form.name"> 
        </el-input>
      </el-form-item>
      
    </el-form>

  </div>

  
  <div style="width: 100%;height: 8%;text-align: center;margin-top: 50vh;">

    <el-button type="primary" @click="clickProject('load')" >
        <span class="button-text">上传太阳能数据</span>
    </el-button>
    <el-button type="primary" @click="clickProject('load')" >
        <span class="button-text">上传⻛能数据</span>
    </el-button>
    <el-button type="primary" @click="clickProject('load')" style="width: 110px">
        <span class="button-text">保存</span>
    </el-button>
    
  </div>

</div>
  
</template>

<script>
  export default {
    name: 'hydrogenProductionPathway',
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        activeDate: '',
        type: ''
      }
    },
    mounted: function() {
    
    },
    methods: {
      buttonClick : function(type,divId){
        for(var i = 1;i<=6;i++){
          $("#hpDiv"+i).css("background","#1f2c6c3b");
        }
        $("#"+divId).css("background","#409EFF");
        this.activeDate = new Date().getTime();
        //路由跳转
        //this.$router.push('/'+type)
      }, 
      
      mapReady({ BMap, map }) {
        let self=this;
        // 选择一个经纬度作为中心点
        this.point = new BMap.Point(117.130,36.632);
        map.centerAndZoom(this.point, 7);
        //滚轮
        map.enableScrollWheelZoom(true);
        //单击事件
        map.addEventListener('click', function (e) {
          //绑定回经纬度框
          self.formData.longitude_latitude = e.point.lng + ',' + e.point.lat;
          /*alert('点击位置经纬度：' + e.point.lng +','+ e.point.lat);*/
        });
      },
      //根据地址搜索
      selectmap(address){
        this.$http.get("/iepsapi/getAddr?address="+address).then((res) => {
          if(res.data.flag){
            this.$message({
              type:'success',
              message:res.data.message
            });
            //进行回显
            this.formData.longitude_latitude= res.data.data;
          }else{
            this.$message.error(res.data.message);
          }
        })
      },
    }
  }
</script>



<style>
  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 

  /* 设定地图的大小 */
  #allmap{
    height: 350px;
    width: 100%;
  }

  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{ 
    width: 55vh;
    height: 15vh;
    margin: auto;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
